<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>数据代理</title>
</head>
<body>
<div id="app">
</div>
<script type="text/javascript">
          let number=18
          let person={
                name:"张三",
                sex:'男'
            }

    //通过数据代理往vm中的data中追加属性
          //使用defineProperty函数配置代理，
          // 第一个参数为需要配置的对象
          // 第二个参数为需要配置到对象中的属性的名称
          // 第三个是配置到对象中的属性的特性，如其value值。是否可修改、是否可删除、是否可枚举等

          //这种方式的话，当我们的number发生变更时，我们需要手动去处理才能保证age的值和number保持一致
    // Object.defineProperty(person,'age',{
    //     value:number,
    //     writable:true,  //是否可以修改代理属性
    //     configurable:true,  //是否可以删除代理属性
    //     enumerable:true,  //是否可以枚举/遍历代理属性
    // })
    //       console.log(Object.keys(person))



          //如果需要在number变化的时候自动将number的值传入到age中，就需要以下的处理方式，处理过后，当年龄发生变更时，number也随之变化，
          //而number发生变更时，age也随之变更
          Object.defineProperty(person,'age',{
              set(value){
                  console.log("监测到age的值发生了变更",value)
                  number=value
              },
              get(){
                  console.log("检测到age的值被调用了")
                  return number
              }
          })
</script>
</body>
</html>
